<!--工艺流程新增/编辑组件-->
<template>
    <div>

        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm page-form">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="工艺路线编号" prop="RouteCode">
                        <el-input v-model="model.RouteCode" placeholder="请输入工艺路线编号"></el-input>
                    </el-form-item>

                    <el-form-item label="工艺路线说明">
                        <el-input v-model="model.RouteDesc" placeholder="请输入工艺路线说明"></el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="工艺路线名称" prop="RouteName">
                        <el-input v-model="model.RouteName" placeholder="请输入工艺路线名称"></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="是否启用" prop="EnableFlag">
                        <el-radio-group v-model="model.EnableFlag">
                            <el-radio label="Y">是</el-radio>
                            <el-radio label="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </el-col>

            </el-row>

        </el-form>
        <el-tabs v-model="activeName">
            <el-tab-pane label="组成工序" name="Process">

                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addProcess" size="small">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small"
                        @click="delProcessS">删除</el-button>
                </div>

                <el-table :data="ProcessData" ref="ProcessForm" v-loading="ProcessDataisLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="OrderNum" label="序号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ProcessCode" label="工序编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ProcessName" label="工序名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="NextProcessName" label="下一个工序名称"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="LinkType" label="与下一道工序关系" :show-overflow-tooltip="true"></el-table-column>

                    <el-table-column prop="KeyFlag" label="关键工序" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.KeyFlag === 'Y'">是</el-tag>
                            <el-tag type="warning" v-else>否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DefaultPreTime" label="准备时间" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="DefaultSufTime" label="等待时间" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ColorCode" label="甘特图显示颜色" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-color-picker v-model="scope.row.ColorCode" :disabled="true"></el-color-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作" :show-overflow-tooltip="true" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click="updateProcess(scope.row)">编辑</el-button>
                            <el-button type="text" @click="delProcess(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--<Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                    :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                    :TotalCount="pageDomain.TotalCount" />-->

            </el-tab-pane>
            <el-tab-pane label="关联产品" name="Product">

                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addProduct" size="small">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small"
                        @click="delProductS">删除</el-button>
                </div>

                <el-table :data="ProductData" ref="ProductForm" v-loading="ProductDataisLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="ItemCode" label="产品物料编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemName" label="产品物料名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Specification" label="规格型号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="备注" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Remark" placeholder="请输入备注"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" :show-overflow-tooltip="true" width="120px">
                        <template slot-scope="scope">
                            <el-button type="text" @click="delProduct(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--<Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                    :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                    :TotalCount="pageDomain.TotalCount" />-->

            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>

        <!--弹窗-->
        <el-dialog append-to-body :close-on-click-modal="false" :title="ProRouteProcessdialogDomain.title"
            :visible.sync="ProRouteProcessdialogDomain.dialogVisible" width="40%" @close="ProRouteProcesscloseDialog">
            <ProRouteProcessInput :ProRouteProcess="ProRouteProcess" :ProcessisUpdate="ProcessisUpdate"
                @callback="ProcessInputcallback" v-if="ProRouteProcessdialogDomain.dialogVisible" />
        </el-dialog>

        <el-dialog append-to-body :close-on-click-modal="false" :title="ProRouteProductdialogDomain.title"
            :visible.sync="ProRouteProductdialogDomain.dialogVisible" width="50%">
            <ProductBomInput @callback="AddProductCallBack" :IsFirst="true"
                v-if="ProRouteProductdialogDomain.dialogVisible" />
        </el-dialog>



    </div>
</template>



<script>

import ProRouteProcessInput from './ProRouteProcessInput.vue'
import ProductBomInput from '@/views/Product/ProductView/components/ProductBomInput.vue'
//import Pagination from '@/components/Pagination.vue'
export default {
    components: {
        ProRouteProcessInput,
        ProductBomInput,
        //Pagination
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            activeName: 'Process',
            /*pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
            },*/
            RouteCode: '',
            ProRouteProcess: {
                ProcessId: '',
                NextProcessName: '',
                OrderNum: '',
                ProcessName: '',
                ColorCode: '',

                LinkType: '',
                DefaultPreTime: '',

                DefaultSufTime: '',
                KeyFlag: '',

                Remark: ''
            },
            ProRouteProduct: {
                ItemId: '',
                ItemCode: '',
                ItemName: '',
                Specification: '',
                UnitOfMeasure: '',
                Remark: ''
            },
            ProcessisUpdate: false,
            ProcessData: [],
            ProductData: [],
            ProcessDataisLoading: false,
            ProductDataisLoading: false,
            //工艺组成对话框对象
            ProRouteProcessdialogDomain: {
                title: '添加工艺组成',
                dialogVisible: false
            },
            //产品对话框对象
            ProRouteProductdialogDomain: {
                title: '添加产品',
                dialogVisible: false
            },
            rules: {
                RouteCode: { required: true, message: '请输入工艺路线编号', trigger: 'blur' },
                RouteName: { required: true, message: '请输入工艺路线名称', trigger: 'blur' },
                EnableFlag: { required: true, message: '请选择是否主启用', trigger: 'blur' },
            }
        }
    },
    //当组件被创建时触发
    created() {
        //如果为编辑状态时
        if (this.isUpdate) {
            this.GetProRoutebyId(this.model.Id);    //根据ProRoute的Id查询ProRouteProcess（工艺组成表（工艺流程附加表））子表数据导入进表格中
            this.GetProRouteProductbyId(this.model.Id)      //根据ProRoute的Id查询ProRouteProduct（产品制程（工艺流程附加表））子表数据导入进表格中
        }

    },
    methods: {
        //添加组成工序
        addProcess() {
            this.ProRouteProcessdialogDomain.title = "添加工艺组成"
            console.log(this.ProRouteProcess)
            this.ProRouteProcessdialogDomain.dialogVisible = true
            this.ProcessisUpdate = false
        },
        //编辑组成工序
        updateProcess(model) {
            this.ProRouteProcessdialogDomain.title = "编辑工艺组成"
            this.ProRouteProcess = { ...model } // 创建一个新的对象并赋值给 ProRouteProcess
            this.ProRouteProcessdialogDomain.dialogVisible = true
            this.ProcessisUpdate = true
            //console.log(this.ProcessData)

        },
        //删除组成工序（多选）
        delProcessS() {
            if (this.$refs.ProcessForm.selection.length <= 0) {
                this.showNotify('请选择一项')
                return
            }

            this.$refs.ProcessForm.selection.forEach(row => {
                const index = this.ProcessData.indexOf(row)
                this.ProcessData.splice(index, 1)
            })

            for (var i = 0; i < this.ProcessData.length; i++) {

                this.ProcessData[i].OrderNum = i + 1
                if (i + 1 < this.ProcessData.length) {
                    this.ProcessData[i].NextProcessName = this.ProcessData[i + 1].ProcessName;
                } else {
                    this.ProcessData[i].NextProcessName = '无'
                }
            }

        },
        //删除组成工序
        delProcess(model) {
            let index = this.ProcessData.indexOf(model);
            this.ProcessData.splice(index, 1);

            for (var i = 0; i < this.ProcessData.length; i++) {

                this.ProcessData[i].OrderNum = i + 1
                if (i + 1 < this.ProcessData.length) {
                    this.ProcessData[i].NextProcessName = this.ProcessData[i + 1].ProcessName;
                } else {
                    this.ProcessData[i].NextProcessName = '无'
                }
            }
        },
        //添加产品
        addProduct() {
            this.ProRouteProductdialogDomain.title = "选择产品"
            this.ProRouteProductdialogDomain.dialogVisible = true
        },
        //删除关联产品（多选）
        delProductS() {
            if (this.$refs.ProductForm.selection.length <= 0) {
                this.showNotify('请选择一项')
                return
            }

            this.$refs.ProductForm.selection.forEach(row => {
                const index = this.ProductData.indexOf(row)
                this.ProductData.splice(index, 1)
            })
        },
        //删除关联产品
        delProduct(model) {
            let index = this.ProductData.indexOf(model)
            this.ProductData.splice(index, 1)
        },
        //提交按钮
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put()
                    }
                    else {
                        this.add()
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },

        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        //新增
        add() {
            this.$http.postForm('/api/ProRoute', { model: this.model, ProcessString: JSON.stringify(this.ProcessData), ProductString: JSON.stringify(this.ProductData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback')
                })
        },
        //修改
        put() {
            this.$http.putForm('/api/ProRoute', { model: this.model, ProcessString: JSON.stringify(this.ProcessData), ProductString: JSON.stringify(this.ProductData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback')
                })
        },
        //根据工艺流程编号获取工艺组成表（工艺流程附加表）方法
        GetProRoutebyId(Id) {
            this.ProcessDataisLoading = true;
            this.$http.get('/api/ProRoute/GetProRoutebyId', {
                params: {
                    RouteId: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.ProcessData = res.Data;
                    this.ProcessDataisLoading = false;
                })
        },
        //根据工艺流程编号获取产品制程（工艺流程附加表）方法
        GetProRouteProductbyId(Id) {
            this.ProductDataisLoading = true;
            this.$http.get('/api/ProRoute/GetProRouteProductbyId', {
                params: {
                    RouteId: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.ProductData = res.Data;
                    this.ProductDataisLoading = false;
                })
        },
        //根据产品物料ID查询产品制程（工艺流程附加表）是否已经配置了工艺路线方法
        GetProRouteProductisBool(Id) {
            return new Promise((OK, NO) => {
                var modelInfo = this.ProductData.find(x => x.ItemId == Id);
                if (modelInfo) {
                    NO()
                } else {
                    this.$http.get('/api/ProRoute/GetProRouteProductisBool', {
                        params: {
                            ItemId: Id
                        }
                    })
                        .then(res => {
                            if (res.Code != -1) {
                                OK()
                            } else {
                                NO()
                            }
                        })
                }

            });
        },
        //添加或编辑工艺组成组件回调
        ProcessInputcallback(model) {
            console.log(this.ProcessData)
            //model.OrderNum = this.ProcessData.length+1;
            if (model.KeyFlag == 'Y') {
                for (var i = 0; i < this.ProcessData.length; i++) {
                    if (this.ProcessData[i].KeyFlag == 'Y' && this.ProcessData[i].OrderNum != model.OrderNum) {
                        this.showNotify('当前工艺路线已经指定过关键工序')
                        return false
                    }
                }
            }
            if (this.ProcessisUpdate) {
                for (var i = 0; i < this.ProcessData.length; i++) {
                    if (this.ProcessData[i].OrderNum == model.OrderNum) {
                        this.ProcessData[i] = model
                        this.model.ProRouteProcess = model
                        this.ProRouteProcessdialogDomain.dialogVisible = false
                        this.$refs.ProcessForm.toggleRowSelection(model)
                        this.$refs.ProcessForm.clearSelection()
                        return
                    }
                }
            }
            this.ProcessData.push(model)
            this.model.ProRouteProcess = model
            this.ProRouteProcessdialogDomain.dialogVisible = false

            for (var i = 0; i < this.ProcessData.length; i++) {

                this.ProcessData[i].OrderNum = i + 1
                if (i + 1 < this.ProcessData.length) {
                    this.ProcessData[i].NextProcessName = this.ProcessData[i + 1].ProcessName;
                } else {
                    this.ProcessData[i].NextProcessName = '无'
                }
            }
        },
        //选择产品回调
        AddProductCallBack(model) {
            this.GetProRouteProductisBool(model.Id)
                .then(() => {
                    this.ProRouteProduct = {
                        ItemId: model.Id,
                        ItemCode: model.ItemCode,
                        ItemName: model.ItemName,
                        Specification: model.Spec,
                        UnitOfMeasure: model.UnitOfMeasure,
                        Remark: ''
                    }
                    this.ProductData.push(this.ProRouteProduct)
                    this.ProRouteProductdialogDomain.dialogVisible = false
                })
                .catch(() => {
                    this.showNotify('此产品已在当前表格中')
                })

        },
        //工艺组成对话框关闭事件
        ProRouteProcesscloseDialog() {
            this.ProRouteProcess = {
                ProcessId: '',
                NextProcessName: '',
                OrderNum: '',
                ProcessName: '',
                ColorCode: '',

                LinkType: '',
                DefaultPreTime: '',

                DefaultSufTime: '',
                KeyFlag: '',

                Remark: ''
            }
        }
    }
}
</script>
<style scoped></style>